<template>
  <view class="main-bg">
    <z-nav-bar backState='3000' @backClick='backClick' type='transparent' :titleCenter='true' title='' />
    <public-module />
    <view class="header-gradient">
      <text class="main-title" style="font-size: 15px;margin-bottom: 3px;">市场主体住所（经营场所）登记信息申报承诺书</text>
    </view>
    <view class="form-card">
      <!-- <view class="form-title">经营场所承诺书:</view> -->
      <view class="form-group">
        <text class="label">市场主体名称：</text>
        <input v-model="form.jycsscztmc" class="input underline-input" placeholder="请输入市场主体名称" />
      </view>
      <view class="form-group" style="flex-direction: column; align-items: flex-start;">
        <view class="addr-row">
          <text class="label">经营场所：</text>
          <text class="black-font">无锡市</text>
          <input v-model="form.district" class="input-mini black-font" />
          <text class="black-font">（区、市）</text>
          <input v-model="form.street" class="input-mini black-font"  />
          <text class="black-font">（街道、乡、镇）</text>
          <input v-model="form.road" class="input-mini black-font"  />
          <text class="black-font">（路、小区、村）</text>
          <input v-model="form.number" class="input-mini black-font"  />
          <text class="black-font">（门牌号）</text>
        </view>
        <!-- <view class="addr-row">
          
        </view> -->
      </view>
      <view class="form-group">
        <text class="label">房屋产权所有人：</text>
        <input v-model="form.owner" class="input underline-input" placeholder="请输入产权所有人" />
      </view>
      <view class="form-group">
        <text class="label">房屋用途</text>
        <picker :range="usageOptions" @change="onPickerChange('usage', $event)">
          <view class="picker">{{ form.usage || '请选择' }}</view>
        </picker>
      </view>
      <view class="form-group">
        <text class="label">使用权取得方式</text>
        <picker :range="rightTypeOptions" @change="onPickerChange('rightType', $event)">
          <view class="picker">{{ form.rightType || '请选择' }}</view>
        </picker>
      </view>
      <view class="form-group">
        <text class="label">使用期限</text>
        <picker :range="periodOptions" @change="onPickerChange('period', $event)">
          <view class="picker">{{ form.period || '请选择' }}</view>
        </picker>
      </view>
      <view v-if="form.period === periodOptions[1]" class="form-group">
        <text class="label">开始</text>
        <picker mode="date" :value="form.startDate" @change="onDateChange('startDate', $event)">
          <view class="picker">{{ form.startDate || '请选择开始日期' }}</view>
        </picker>
        <text class="label" style="margin: 0 12rpx;">至</text>
        <text class="label">结束</text>
        <picker mode="date" :value="form.endDate" @change="onDateChange('endDate', $event)">
          <view class="picker">{{ form.endDate || '请选择结束日期' }}</view>
        </picker>
      </view>
      <view class="form-group">
        <text class="label">网络经营场所登记</text>
        <input v-model="form.netRecord" class="input" placeholder="请输入网络经营场所登记" />
      </view>
      <button class="submit-btn" @tap="submit">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        district: '', street: '', road: '', number: '', usage: '', rightType: '', period: '', netRecord: '',
        startDate: '', endDate: '', owner: '', jycsscztmc: '',
        jycsqyeara: '', jycsqmontha: '', jycsdaya: '', jycsqyearb: '', jycsqmonthb: '', jycsqdayb: ''
      },
      usageOptions: ['城镇住宅','农村住宅','非住宅','农村自建房'],
      rightTypeOptions: ['自有','租赁','无偿使用','其他'],
      periodOptions: ['长期','自定义']
    }
  },
  onLoad() {
    // 自动回显缓存
    const allFormData = uni.getStorageSync('allFormData');
    if (allFormData) {
      this.form.jycsscztmc = allFormData.jycsscztmc || '';
      this.form.district = allFormData.jycsdistrict || '';
      this.form.street = allFormData.jycsvillage || '';
      // road和number合并存储，需拆分
      if (allFormData.jycsroad) {
        // 假设门牌号为数字结尾
        const match = allFormData.jycsroad.match(/(.*?)(\d+)$/);
        if (match) {
          this.form.road = match[1] || '';
          this.form.number = match[2] || '';
        } else {
          this.form.road = allFormData.jycsroad;
          this.form.number = '';
        }
      }
      this.form.owner = allFormData.jycsfw || '';
      this.form.usage = allFormData.jycsyt || '';
      this.form.rightType = allFormData.jycsfs || '';
      this.form.period = allFormData.jycsqx || '';
      this.form.netRecord = allFormData.jycsdj || '';
      this.form.jycsscztmc = allFormData.jycsscztmc || '';
      
      // 回显使用期限年月日字段
      this.form.jycsqyeara = allFormData.jycsqyeara || '';
      this.form.jycsqmontha = allFormData.jycsqmontha || '';
      this.form.jycsdaya = allFormData.jycsdaya || '';
      this.form.jycsqyearb = allFormData.jycsqyearb || '';
      this.form.jycsqmonthb = allFormData.jycsqmonthb || '';
      this.form.jycsqdayb = allFormData.jycsqdayb || '';
      
      // 如果有年月日数据，设置开始和结束日期
      if (this.form.jycsqyeara && this.form.jycsqmontha && this.form.jycsdaya) {
        this.form.startDate = `${this.form.jycsqyeara}-${this.form.jycsqmontha}-${this.form.jycsdaya}`;
      }
      if (this.form.jycsqyearb && this.form.jycsqmonthb && this.form.jycsqdayb) {
        this.form.endDate = `${this.form.jycsqyearb}-${this.form.jycsqmonthb}-${this.form.jycsqdayb}`;
      }
    }
  },
  methods: {
    backClick() {
      uni.navigateBack();
    },
    onPickerChange(key, e) {
      let value = e.detail.value;
      if (key === 'usage') {
        this.form.usage = this.usageOptions[value];
      } else if (key === 'rightType') {
        this.form.rightType = this.rightTypeOptions[value];
      } else if (key === 'period') {
        this.form.period = this.periodOptions[value];
      }
    },
    onDateChange(key, e) {
      this.form[key] = e.detail.value;
      
      // 解析日期并存储年月日字段
      if (key === 'startDate' && e.detail.value) {
        const date = new Date(e.detail.value);
        this.form.jycsqyeara = date.getFullYear().toString();
        this.form.jycsqmontha = (date.getMonth() + 1).toString().padStart(2, '0');
        this.form.jycsdaya = date.getDate().toString().padStart(2, '0');
      } else if (key === 'endDate' && e.detail.value) {
        const date = new Date(e.detail.value);
        this.form.jycsqyearb = date.getFullYear().toString();
        this.form.jycsqmonthb = (date.getMonth() + 1).toString().padStart(2, '0');
        this.form.jycsqdayb = date.getDate().toString().padStart(2, '0');
      }
    },
    submit() {
      let allFormData = uni.getStorageSync('allFormData') || {};
      allFormData = {
        jcname: allFormData.jcname || '',
        jcphone: allFormData.jcphone || '',
        jcyzbm: allFormData.jcyzbm || '',
        jcprovince: allFormData.jcprovince || '',
        jccity: allFormData.jccity || '',
        jcdistrict: allFormData.jcdistrict || '',
        jctownship: allFormData.jctownship || '',
        jcvillage: allFormData.jcvillage || '',
        jch: allFormData.jch || '',
        jctxt: allFormData.jctxt || '',
        jcjyz: allFormData.jcjyz || '',
        jcje: allFormData.jcje || '',
        jczz: allFormData.jczz || '',
        jcfb: allFormData.jcfb || '',
        jcfw: allFormData.jcfw || '',
        jyzname: allFormData.jyzname || '',
        jyztype: allFormData.jyztype || '',
        jyzid: allFormData.jyzid || '',
        jyzphone: allFormData.jyzphone || '',
        jyzlandline: allFormData.jyzlandline || '',
        dlrqx: allFormData.dlrqx || '',
        dlrqs: allFormData.dlrqs || '',
        dlrxg: allFormData.dlrxg || '',
        dlrtx: allFormData.dlrtx || '',
        dlrlandline: allFormData.dlrlandline || '',
        dlrphone: allFormData.dlrphone || '',
        jycsdistrict: this.form.district || '',
        jycsvillage: this.form.street || '',
        jycsroad: (this.form.road || '') + (this.form.number || ''),
        jycsfw: this.form.owner || '',
        jycsyt: this.form.usage || '',
        jycsfs: this.form.rightType || '',
        jycsqx: this.form.period || '',
        jycsdj: this.form.netRecord || '',
        jycsscztmc: this.form.jycsscztmc || '',
        jycsqyeara: this.form.jycsqyeara || '',
        jycsqmontha: this.form.jycsqmontha || '',
        jycsdaya: this.form.jycsdaya || '',
        jycsqyearb: this.form.jycsqyearb || '',
        jycsqmonthb: this.form.jycsqmonthb || '',
        jycsqdayb: this.form.jycsqdayb || ''
      };
      uni.setStorageSync('allFormData', allFormData);
      console.log(uni.getStorageSync('allFormData'));
      uni.showToast({ title: '已保存到本地', icon: 'success' });
    }
  }
}
</script>

<style scoped>
.main-bg {
  min-height: 100vh;
  background: #5fa8e6;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding: 40rpx 0 0 0; */
}
.header-gradient {
  width: 100vw;
  height: 110rpx;
  background: linear-gradient(135deg, #8ec5fc 0%, #e0c3fc 100%);
  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(30,105,222,0.08);
}
.main-title {
  font-size: 40rpx;
  color: #222;
  font-weight: bold;
  letter-spacing: 2rpx;
}
.form-card {
  background: #5fa8e6;
  border-radius: 32rpx;
  /* padding: 40rpx 32rpx; */
  width: 90vw;
  box-shadow: 0 8rpx 32rpx rgba(30,105,222,0.10);
  color: #fff;
  margin-top: 20rpx;
  animation: fadeInUp 0.5s;
}
.form-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 32rpx;
  color: #222;
}
.form-group {
  margin-bottom: 28rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.label {
  /* width: 180rpx; */
  font-size: 34rpx;
  color: #222;
  text-align: left;
  white-space: nowrap;
  margin-right: 16rpx;
}
.input, .picker {
  flex: 1;
  min-width: 0;
}
.input {
  background: transparent;
  border: none;
  border-bottom: 2rpx solid #222;
  border-radius: 0;
  /* padding: 10rpx 0; */
  font-size: 34rpx;
  color: #222;
  outline: none;
}
.picker {
  background: transparent;
  border: none;
  border-bottom: 2rpx solid #222;
  border-radius: 0;
  padding: 10rpx 0;
  font-size: 28rpx;
  color: #222;
}
.submit-btn {
  width: 100%;
  background: linear-gradient(90deg, #6db3f2 0%, #1e69de 100%);
  color: #fff;
  font-size: 32rpx;
  border-radius: 16rpx;
  /* padding: 24rpx 0; */
  margin-top: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(30,105,222,0.10);
  transition: background 0.2s;
}
.submit-btn:active {
  background: #1e69de;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40rpx); }
  to { opacity: 1; transform: translateY(0); }
}
.readonly-text {
  flex: 1;
  font-size: 34rpx;
  color: #222;
  background: transparent;
  border-bottom: 2rpx solid #222;
  padding: 10rpx 0;
}
.addr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 8rpx;
}
.input-mini {
  width: 100rpx;
  min-width: 60rpx;
  background: transparent;
  border: none;
  border-bottom: 2rpx solid #222;
  border-radius: 0;
  font-size: 28rpx;
  outline: none;
  margin: 0 4rpx;
  text-align: center;
}
.black-font {
  color: #222 !important;
}
.label {
  color: #222 !important;
}
/* 下划线输入框样式 */
.underline-input {
  background: transparent;
  border: none;
  border-bottom: 2rpx solid #222;
  border-radius: 0;
  font-size: 34rpx;
  color: #222;
  outline: none;
  min-width: 200rpx;
  margin-left: 12rpx;
}
</style> 